@import "./common";

.wrap {
    main {
        .probBox {
            width: 1200px;
            margin: 90px auto 0;

            .probTitle {
                @extend %title;
            }

            .probCont {
                width: 100%;
                margin-top: 40px;
                display: flex;
                justify-content: space-between;

                .item {
                    width: 285px;
                    height: 270px;
                    background-color: #fff;
                    box-shadow: 0 3px 36px 0 rgba(51, 51, 51, 0.1);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    cursor: pointer;

                    .item_img {
                        margin-top: 40px;

                        img {
                            display: block;
                        }
                    }

                    .item_cont {
                        text-align: center;

                        h3 {
                            font-size: 18px;
                            font-weight: 700;
                            margin: 25px 0 10px;
                        }

                        p {
                            line-height: 24px;
                        }
                    }
                }
            }
        }

        .systemBox {
            width: 100%;
            margin-bottom: 80px;

            .systemTitle {
                @extend %title;
                margin-top: 80px;
            }

            .systemCont {
                .item {
                    width: 100%;
                    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(245, 245, 245, 1) 100%);
                    display: flex;
                    justify-content: center;

                    .container {
                        width: 1200px;
                        height: 540px;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .text {
                            .title {
                                margin-top: 40px;
                                margin-right: 10px;
                                font-size: 28px;
                                font-weight: 800;
                                line-height: 34px;
                                color: #333;

                                span {
                                    background-color: rgb(255, 226, 231);
                                    font-size: 12px;
                                    font-weight: 400;
                                    color: red;
                                    padding: 3px;
                                    position: relative;
                                    top: -5px;
                                    left: 10px;
                                }
                            }

                            .m_title {
                                font-size: 20px;
                                font-weight: 700;
                                color: #ff220b;
                                margin: 17px 0 20px;
                            }

                            .cont {
                                li {
                                    line-height: 24px;
                                }
                            }
                        }

                        .odd {
                            margin-right: 130px;
                        }

                        .even {
                            margin-left: 130px;
                        }
                    }
                }
            }
        }

        .unionBox {
            width: 100%;
            background-image: url(../img/index/4171872.png);
            background-repeat: no-repeat;
            background-position: 100% 100%;
            background-size: 100% 570px;
            display: flex;
            justify-content: center;

            .container {
                width: 1200px;

                .artificial {
                    width: 100%;
                    margin-bottom: 80px;

                    .title {
                        @extend %title;
                    }

                    .m_title {
                        color: rgba(96, 96, 96, 1);
                        font-size: 16px;
                        text-align: center;
                        line-height: 24px;
                        padding: 20px 140px 55px;
                    }

                    .art_bg {
                        img {
                            width: 100%;
                            display: block;
                        }
                    }
                }

                .online {
                    width: 100%;

                    .title {
                        @extend %title;
                    }

                    .online_cont {
                        display: flex;
                        margin-top: 40px;

                        .item {
                            flex: 1;
                            height: 235px;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            text-align: center;
                            background: #fff;
                            box-shadow: 0 3px 16px rgb(51 51 51 / 10%);
                            margin: 0 10px;
                            cursor: pointer;
                            position: relative;

                            &:hover {
                                background-image: url(../img/index/3773f52.png);
                                background-size: cover;

                                .imgBox {
                                    img:first-child {
                                        display: none;
                                    }
                                }
                            }

                            .imgBox {
                                display: flex;
                                justify-content: center;

                                img:first-child {
                                    width: 71px;
                                    position: absolute;
                                    top: 20px;
                                    left: 20px;
                                }
                            }

                            .textBox {
                                line-height: 42px;
                            }
                        }
                    }
                }
            }
        }

        .chooseBox {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 80px 0;

            .title {
                @extend %title;
            }

            .cont {
                width: 1200px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-top: 40px;

                .item {
                    display: flex;
                    align-items: center;
                    width: calc(50% - 10px);
                    background: #fff;
                    box-shadow: 0 3px 16px rgb(51 51 51 / 10%);
                    box-sizing: border-box;
                    padding: 26px 36px;
                    margin-bottom: 20px;

                    .textBox {
                        font-size: 18px;
                        margin-left: 25px;
                    }
                }
            }
        }

        .newBox {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .title {
                @extend %title;
            }

            .cont {
                width: 1200px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-top: 40px;

                .item {
                    display: flex;
                    width: calc(50% - 10px);
                    background: rgb(248, 248, 248);
                    box-sizing: border-box;
                    margin-bottom: 20px;
                    position: relative;
                    cursor: pointer;

                    .textBox {
                        margin: 10px 20px;
                    }

                    .timeBox {
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        color: #999;
                        font-size: 12px;
                    }
                }
            }
        }
    }
}